<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 智能博客系统</title>
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/components.css">
    <link rel="stylesheet" href="static/css/profile.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <a href="index.html">智能博客</a>
            </div>
            <div class="nav-menu">
                <a href="index.html" class="nav-link">首页</a>
                <a href="#" class="nav-link">分类</a>
                <a href="#" class="nav-link">关于</a>
            </div>
            <div class="nav-actions">
                <button class="theme-toggle" id="themeToggle">
                    <span class="theme-icon">🌙</span>
                </button>
                <div class="user-menu" id="userMenu">
                    <span class="username" id="username"></span>
                    <button class="btn btn-secondary" id="logoutBtn">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <div class="profile-layout">
                <!-- 侧边栏 -->
                <aside class="profile-sidebar">
                    <div class="user-card">
                        <div class="user-avatar">
                            <img src="https://via.placeholder.com/100" alt="用户头像" id="userAvatar">
                        </div>
                        <div class="user-info">
                            <h3 class="user-name" id="userName"></h3>
                            <p class="user-email" id="userEmail"></p>
                            <p class="user-join-date">加入时间: <span id="userJoinDate"></span></p>
                        </div>
                        <div class="user-stats">
                            <div class="stat-item">
                                <span class="stat-number" id="postCount">0</span>
                                <span class="stat-label">发布</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="favoriteCount">0</span>
                                <span class="stat-label">收藏</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="likeCount">0</span>
                                <span class="stat-label">获赞</span>
                            </div>
                        </div>
                    </div>

                    <nav class="profile-nav">
                        <a href="#" class="nav-item active" data-tab="posts">
                            <span class="icon">📝</span>
                            我的帖子
                        </a>
                        <a href="#" class="nav-item" data-tab="favorites">
                            <span class="icon">⭐</span>
                            我的收藏
                        </a>
                        <a href="#" class="nav-item" data-tab="comments">
                            <span class="icon">💬</span>
                            我的评论
                        </a>
                        <a href="#" class="nav-item" data-tab="settings">
                            <span class="icon">⚙️</span>
                            账户设置
                        </a>
                    </nav>
                </aside>

                <!-- 主内容区 -->
                <div class="profile-content">
                    <!-- 我的帖子 -->
                    <div class="tab-content active" id="postsTab">
                        <div class="content-header">
                            <h2>我的帖子</h2>
                            <button class="btn btn-primary" id="newPostBtn">
                                <span class="icon">➕</span>
                                发布新帖子
                            </button>
                        </div>
                        <div class="posts-list" id="userPostsList">
                            <div class="loading" id="postsLoading">
                                <div class="loading-spinner"></div>
                                <p>加载中...</p>
                            </div>
                        </div>
                        <div class="pagination" id="postsPagination"></div>
                    </div>

                    <!-- 我的收藏 -->
                    <div class="tab-content" id="favoritesTab">
                        <div class="content-header">
                            <h2>我的收藏</h2>
                        </div>
                        <div class="favorites-list" id="favoritesList">
                            <div class="loading" id="favoritesLoading">
                                <div class="loading-spinner"></div>
                                <p>加载中...</p>
                            </div>
                        </div>
                        <div class="pagination" id="favoritesPagination"></div>
                    </div>

                    <!-- 我的评论 -->
                    <div class="tab-content" id="commentsTab">
                        <div class="content-header">
                            <h2>我的评论</h2>
                        </div>
                        <div class="comments-list" id="userCommentsList">
                            <div class="loading" id="commentsLoading">
                                <div class="loading-spinner"></div>
                                <p>加载中...</p>
                            </div>
                        </div>
                        <div class="pagination" id="commentsPagination"></div>
                    </div>

                    <!-- 账户设置 -->
                    <div class="tab-content" id="settingsTab">
                        <div class="content-header">
                            <h2>账户设置</h2>
                        </div>
                        <div class="settings-form">
                            <form id="profileForm">
                                <div class="form-section">
                                    <h3>基本信息</h3>
                                    <div class="form-group">
                                        <label for="profileUsername">用户名</label>
                                        <input type="text" id="profileUsername" readonly>
                                        <small>用户名不可修改</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="profileEmail">邮箱</label>
                                        <input type="email" id="profileEmail">
                                    </div>
                                    <div class="form-group">
                                        <label for="profileBio">个人简介</label>
                                        <textarea id="profileBio" rows="4" placeholder="介绍一下自己..."></textarea>
                                    </div>
                                </div>

                                <div class="form-section">
                                    <h3>修改密码</h3>
                                    <div class="form-group">
                                        <label for="currentPassword">当前密码</label>
                                        <input type="password" id="currentPassword">
                                    </div>
                                    <div class="form-group">
                                        <label for="newPassword">新密码</label>
                                        <input type="password" id="newPassword">
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmPassword">确认新密码</label>
                                        <input type="password" id="confirmPassword">
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">保存设置</button>
                                    <button type="button" class="btn btn-secondary" id="resetForm">重置</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 智能博客系统. All rights reserved.</p>
        </div>
    </footer>

    <!-- 发布帖子模态框 -->
    <div class="modal" id="newPostModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>发布新帖子</h3>
                <button class="modal-close" id="newPostModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <form id="newPostForm">
                    <div class="form-group">
                        <label for="postTitle">标题</label>
                        <input type="text" id="postTitle" required placeholder="请输入帖子标题">
                    </div>
                    <div class="form-group">
                        <label for="postCategory">分类</label>
                        <select id="postCategory" required>
                            <option value="">选择分类</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="postContent">内容</label>
                        <textarea id="postContent" rows="10" required placeholder="请输入帖子内容"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="autoClassify" checked>
                            <span class="checkmark"></span>
                            启用AI智能分类
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="autoSummary" checked>
                            <span class="checkmark"></span>
                            启用AI智能摘要
                        </label>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">发布帖子</button>
                        <button type="button" class="btn btn-secondary" id="cancelPost">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑帖子模态框 -->
    <div class="modal" id="editPostModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>编辑帖子</h3>
                <button class="modal-close" id="editPostModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editPostForm">
                    <input type="hidden" id="editPostId">
                    <div class="form-group">
                        <label for="editPostTitle">标题</label>
                        <input type="text" id="editPostTitle" required>
                    </div>
                    <div class="form-group">
                        <label for="editPostCategory">分类</label>
                        <select id="editPostCategory" required>
                            <option value="">选择分类</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editPostContent">内容</label>
                        <textarea id="editPostContent" rows="10" required></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">保存修改</button>
                        <button type="button" class="btn btn-secondary" id="cancelEdit">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="static/js/main.js"></script>
    <script src="static/js/profile.js"></script>
</body>
</html>